<template>
  <div class="flex items-center">
    <el-radio-group v-model="internalActiveName" size="small" class="mr-2">
      <el-radio-button v-for="(item, index) in tabs" :key="item" :index="index" :label="item"></el-radio-button>
    </el-radio-group>
    <el-button size="mini" style="height: 30px;" @click="copyLastGroups">
      copy last groups
    </el-button>
    <el-button size="mini" style="height: 30px;" @click="copyUrl">
      copy url
    </el-button>
  </div>
</template>

<script>

export default {
  // 组件名称
  name: 'GroupsHeader',
  // 接收的外部传入参数
  props: {
    // 通过 prop 传递 `activeName` 和 `tabs`
    value: {
      type: String,
      required: true
    },
    groups: {
      type: Array,
      required: true
    }
  },
  // 定义响应式的数据属性
  data() {
    return {
      // 初始化一个本地变量来保存 `activeName`
      internalActiveName: this.value,

      // 你的数据属性
      tabs: ['group', 'group bar line', 'kill prev group accuracy', 'number distribution']
    }
  },
  watch: {
    // 当 `internalActiveName` 改变时，更新父组件的 `value`
    internalActiveName(newVal) {
      this.$emit('input', newVal)
    }
  },
  // 自定义方法，用于处理组件逻辑
  methods: {
    // 复制最后一期号码所在组的号码
    copyLastGroups() {
      const { number } = this.allValues[this.allValues.length - 1]
      const items = this.groups.find((arr) => arr.includes(Number(number)))
      navigator.clipboard.writeText(`[
        ${items.join(',')}
      ]`)
    }
  }
}
</script>
